<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2023-03-07 15:33:53
 * @LastEditors: Andy
 * @LastEditTime: 2023-03-29 16:03:49
-->
<template>
  <x-page>
    <x-filter @search="handleSearch" @reset="resetSearch">
      <x-filter-item :label="$t('supplier.record.code')">
        <el-input
          v-model="searchParams.supplierCode"
          :placeholder="$t('supplier.record.inputHolder')"
          clearable
        ></el-input>
      </x-filter-item>
      <x-filter-item :label="$t('supplier.record.suppierName')">
        <el-input v-model="searchParams.fullName" :placeholder="$t('supplier.record.inputHolder')" clearable></el-input>
      </x-filter-item>
      <x-filter-item :label="$t('supplier.record.type')">
        <x-select
          :placeholder="$t('supplier.record.selectHolder')"
          v-model="searchParams.enterpriseType"
          :options="dictOptions['srm_supplier_info.enterprise_type']"
          style="width: 100%"
        ></x-select>
      </x-filter-item>
      <x-filter-item :label="$t('supplier.record.registeSource')">
        <x-select
          :placeholder="$t('supplier.record.selectHolder')"
          v-model="searchParams.source"
          :options="dictOptions['srm_supplier_info.source']"
          style="width: 100%"
        ></x-select>
      </x-filter-item>
      <x-filter-item :label="$t('supplier.record.creatTime')">
        <el-date-picker
          v-model="searchParams.startTime"
          type="datetimerange"
          :placeholder="$t('supplier.record.selectHolder')"
          style="width: 100%"
          value-format="yyyy-MM-dd"
          format="yyyy-MM-dd"
          :range-separator="$t('common.to')"
          :start-placeholder="'开始时间'"
          :end-placeholder="'结束时间'"
        >
        </el-date-picker>
      </x-filter-item>
    </x-filter>
    <!--数据面板-->
    <x-data>
      <!--数据面板按钮插糟-->
      <template #tool>
        <el-row type="flex" class="tools" justify="space-between">
          <el-col :span="20">
            <el-button type="primary" v-hasPermi="['srm:supplier:add']" @click="handleAdd" :icon="buttonIcons('add')">
              {{ $t('common.add') }}</el-button
            >
          </el-col>
          <el-col :span="4" class="tools-config">
            <x-column-config :columns="columns" @updateColumns="updateColumns" @on-refresh="loadData" />
          </el-col>
        </el-row>
      </template>
      <!-- 数据表格 -->
      <x-table
        ref="tableCom"
        :pagination="pagination"
        :data-source="tableData"
        :loading="loading"
        :row-key="'id'"
        @on-change="handleTableChange"
        @on-selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column :label="$t('common.serialNumber')" :width="55" fixed type="index" />
        <el-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.prop"
          :fixed="item.fixed"
          :show-overflow-tooltip="true"
          :width="item.width"
          :min-width="item.minWidth || '-'"
          :label="item.label"
          :sortable="'custom'"
        >
          <template #default="scope">
            <span v-if="item.prop === 'state'">
              {{ selectDictLabel(dictOptions['srm_supplier_info.state'], scope.row[item.prop]) }}
            </span>
            <!-- <el-switch
              v-if="item.prop === 'state'"
              :value="scope.row[item.prop]"
              active-color="#4474F6"
              inactive-color="#A5A9B2"
              @change="handleChangeState(scope.row[item.prop], scope.row.id)"
              :disabled="!checkBntPermi('srm:supplier:state')"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch> -->
            <span v-else-if="item.prop === 'supplierState'">
              {{ selectDictLabel(dictOptions['srm_supplier_info.supplier_state'], scope.row[item.prop]) }}
            </span>
            <span v-else-if="item.prop === 'source'">
              {{ selectDictLabel(dictOptions['srm_supplier_info.source'], scope.row[item.prop]) }}</span
            >
            <span v-else-if="item.prop === 'enterpriseType'">
              {{ selectDictLabel(dictOptions['srm_supplier_info.enterprise_type'], scope.row[item.prop]) }}</span
            >
            <span v-else>{{ scope.row[item.prop] | emptyVal }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" :label="$t('common.opeartion')" :align="'center'" width="160">
          <template #default="scope">
            <more-table-actions
              :permis-list="permissionsActions"
              :action-list="getActions(actions, scope.row)"
              :row="scope.row"
              @onActionClick="handleActions"
            />
          </template>
        </el-table-column>
      </x-table>
    </x-data>
  </x-page>
</template>
<script>
  import { buttonIcons, PermissionsMixin, QueryDictMixin, selectDictLabel, TableListMixin } from '@package/utils'
  import { actions, columns } from '../config/recordConfig.js'

  import { apiDeleteSupplier, listUrl } from '../api/record.js'
  import { EnumApiCode } from '../../../../../../globalEnum.js'

  export default {
    name: 'Record',
    mixins: [TableListMixin, QueryDictMixin, PermissionsMixin],
    data() {
      return {
        columns,
        actions,
        listUrl,
        searchParams: {
          agreementName: '',
          agreementCode: '',
          agreementType: '',
          startTime: [],
          beginTime: '',
          endTime: ''
        },
        dictKeys: ['system.whether', 'system.state'],
        srmDictKeys: [
          'srm_supplier_info.enterprise_type',
          'srm_supplier_info.source',
          'srm_supplier_info.state',
          'srm_supplier_info.audit_state',
          'srm_supplier_info.supplier_state'
          // ''
        ]
      }
    },
    computed: {
      getActions() {
        return (actions, row) => {
          return actions.map((action) => {
            // if (['edit'].indexOf(action.key) !== -1 && [2, 4].indexOf(row.auditState) !== -1) {
            //   action.disabled = true
            // } else {
            //   action.disabled = false
            // }
            action.disabled = false
            return action
          })
        }
      }
    },
    created() {},
    methods: {
      selectDictLabel,
      buttonIcons,
      handleAdd() {
        this.$router.push('/supplier/record/add')
      },
      handleSearch() {
        this.queryParam = JSON.parse(JSON.stringify(this.searchParams))
        const createTime = this.queryParam.startTime
        this.queryParam.beginTime = createTime ? `${createTime[0]} 00:00:00` : ''
        this.queryParam.endTime = createTime ? `${createTime[1]} 23:59:59` : ''
        this.loadData()
      },
      // 状态切换
      // async handleChangeState(state, ids) {
      //   // const result = Array.isArray(ids) ? ids : [ids]
      //   const result = ids
      //   try {
      //     const { code, msg } =
      //       `${state}` === '0'
      //         ? await apiPutEnableSupplier(result)
      //         : await apiPutDisableSupplier(result)
      //     if (code === EnumApiCode.Success) {
      //       this.$message.success(this.$t('system.user.successTips'))
      //     } else {
      //       this.$message.error(msg)
      //     }
      //     this.loadData()
      //   } finally {
      //     this.loadData()
      //   }
      // },
      handleActions({ key, data }) {
        switch (key) {
          case 'edit':
            this.$router.push({ path: '/supplier/record/edit', query: data })
            break
          case 'delete':
            this.handleDeleteSupplier(data.id)
            break
          default:
            this.$router.push({ path: '/recordDetail', query: data })
            break
        }
      },
      handleDeleteSupplier(id) {
        this.$confirm('确定是否删除该供应商数据?', '提示', {
          confirmButtonText: this.$t('common.sure'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }).then(async () => {
          const { code } = await apiDeleteSupplier(id)
          if (code === EnumApiCode.Success) {
            this.$message.success(this.$t('common.opeartionSuccess'))
            await this.loadData()
          }
        })
      }
    }
  }
</script>
